//----------------banner滚动
var $roll = $('.roll');
var $img = $('.roll img');
var $li = $('.sliderButton li');
$($li[0]).css('backgroundColor','black');
$roll.css('width', $img.length*1200+'px');
var timer = setInterval(rollFun,4000);
var count = 1;
function rollFun(){
	if(count>4){
		count=0;
	}
	for(var i=0;i<$li.length;i++){
		$($li[i]).css('backgroundColor','white');
	}
	$($li[count]).css('background-color','black');
	$roll.animate({left:count*1200*-1+'px'},500);
	count++;
}
for(var j=0;j<$li.length;j++){
//	$li[j].num=j;
//	$($li[j]).click(function(){
//		
//		count = this.num;
//		for(var i=0;i<$li.length;i++){
//			$($li[i]).css('backgroundColor','white');
//		}
//		$(this).css('background-color','black');
//		$roll.animate({left:count*1200*-1+'px'},500);
//		count++;
//		clearInterval(timer);
//		timer = setInterval(rollFun,4000);
//	})

	(function(num){
		$($li[j]).click(function(){
			clearInterval(timer);
//			$roll.stop();
			count = num;
			for(var k=0;k<$li.length;k++){
				$($li[k]).css('backgroundColor','white');
			}
			$(this).css('background-color','black');
			$roll.animate({left:count*1200*-1+'px'},500);			
			count++;		
			timer = setInterval(rollFun,4000);
		});
	})(j);
}
//------------------------翻页
var height = $(document).height()*0.55;
$('.pageTurn li').click(function () {
	$('body,html').animate({scrollTop:height},300);
	for(var i=0;i<$('.pageTurn li').length;i++){
		$($('.pageTurn li')[i]).css({
			'background':'white',
			'color':' #d6d6d6',
			'border':'1px solid #d6d6d6'
		})
	}
	$(this).css({
		'background':'orangered',
		'color':' white',
		'border':'1px solid orangered'
	})

	var num = $(this).index()*5;
	 getData(num);
})

//-------------------------------获取数据
function render(obj) {
	var tpl = '<li class="clearfix">\
					<figure>\
					<img src="'+obj.shop_ico+'"/>\
						<figcaption>\
						<a>'+obj.shop_name+'</a>\
						<span>店铺等级：</span>\
					<a>\
					<img src="/images/shopgrade1.jpg"/>\
						<img src="/images/shopgrade1.jpg"/>\
						</a>\
						<p><nobr>主营：'+obj.main+'</nobr></p>\
					<p><nobr>地址：'+obj.addr_detail+'</nobr></p>\
					</figcaption>\
					</figure>\
					<div class="population">\
						<dl>\
						<dd>先行赔付</dd>\
						<dd>同城帮认证</dd>\
						<dd>人气：'+obj.count+'</dd>\
					</dl>\
					</div>\
					<a href="/shop"><div class="enterShop">进入店铺</div></a>\
				</li>';
	return tpl;
}

var resData ={};
function getData(k) {
	$.get('/home/shop/list',function (res) {
		if(typeof res =="string"){
			res = JSON.parse(res);
		}

		var html = [];

		for(var i=k,j=k-5;i<5+k;i++){
			if(j>=0){
				markerArray[j].setMap();
			}
			j++;
			html.push(render(res.shop_data[i]));
			CreatMapDot(res.shop_data[i],i);
		}
		$('#list').html(html.join(" "));
		resData = res.shop_data;

        //======================Suggest
		var countries = [
			 { value: resData[0].shop_name , data: 'AD' },
			 { value: resData[1].shop_name, data: 'AD' },
			 { value: resData[2].shop_name, data: 'AD' },
			 { value: resData[3].shop_name, data: 'AD' },
			 { value: resData[4].shop_name, data: 'AD' },
			 { value: 'qwer', data: 'ZZ' }
		];

		$('#searching').autocomplete({
			lookup: countries,
			onSelect: function (suggestion) {
				console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
			}
		});
	})
}
getData(0);
//----------------------------------地图
var markerArray = [];
var infowindowArray = [];

var map = new AMap.Map('container');
map.setZoom(10);
map.setCenter([116.39,39.9]);
// var marker = new AMap.Marker({
// 	position: [116.480983, 39.989628],
// 	map:map
// });
//
// var infowindow = new AMap.InfoWindow({
// 	content: '<h3>高德地图</h1><div>高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。</div>',
// 	offset: new AMap.Pixel(0, -30),
// 	size:new AMap.Size(230,0)
// })
//
// var clickHandle = AMap.event.addListener(marker, 'click', function() {
// 	infowindow.open(map, marker.getPosition())
// })

function CreatMapDot(obj,num) {
	var marker = new AMap.Marker({
		position: [obj.map_longitude,obj.map_latitude],
		map:map
	});
	markerArray.push(marker);
	var infowindow = new AMap.InfoWindow({
		content: '<h3>'+obj.shop_name+'</h1><div>'+obj.addr_detail+'</div>',
		offset: new AMap.Pixel(0, -30),
		size:new AMap.Size(230,0)
	})
	// infowindowArray.push(infowindow);
	AMap.event.addListener(marker, 'click', function() {
		infowindow.open(map, marker.getPosition())
	})
}

var $mapButton = $('.mapTop button');
var $map = $('.map');
var $modMapLayer = $('.mod-mapLayer');
$map.click(function () {
	$modMapLayer.css({
		'position':'fixed',
		'top':'0',
		'left':'0',
		'width':'100%',
		'height':'100%',
		'z-index':'10',
		'background':'rgba(0,0,0,0.5)',
		'display':'block'
	})
})
$mapButton.click(function () {
	$modMapLayer.css({'display':'none'});
})
//=========================Suggest
























